<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/27
  Time: 21:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>SAS心理健康试题页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/sasindex.css">
    <script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
</head>
<body>
<!-- 头部 -->
<div id="head">
    <div id="head1">
        <p>焦虑自评量表SAS-20</p>
        <p>
            指导语：
            <br>下面有二十条文字，请仔细阅读每一条，把意思弄明白，然后根据您最近一周的实际感觉,
            <br>选择等级：①很少有&nbsp;②有时有&nbsp;③大部分时间有&nbsp;④绝大多数时间有。
        </p>
    </div>
</div>
<div id="nav">最近30天测试：410313人</div>

<!-- 选项 -->
<div id="options">

    <div>
        <span id="curr">01</span>/
        <span id="totalnum">${allsub.total}</span>
    </div>

    <!-- 进度条 开始 -->
    <div>
        <div></div>
    </div>
    <!-- 进度条 结束-->

    <!-- 存放题目的 -->
    <div>
        <!-- 题目开始 -->
        <c:forEach items="${allsub.list}" var="s" varStatus="d">
            <%-- 题目 --%>
            <span class="tm">
                    <%-- 标题 --%>
                    <p>
                        <a>${s.sasnumber}</a>.${s.sastitle}
                    </p>

                <!-- 选项开始 -->
                    <div>
                        <%--试题编号--%>
                        <span style="display: none;" name="sasnumber">${s.sasnumber}</span>
                            <%-- 试题选项 --%>
                            <%-- 试题选项 --%>
                            <ul class="xx">
                                <li>${s.xx1}</li>
                                <li>${s.xx2}</li>
                                <li>${s.xx3}</li>
                                <li>${s.xx4}</li>
                            </ul>
                        <%--序号开始--%>
                        <c:if test="${d.first}">
                            <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                        </c:if>
                        <%--序号末尾--%>
                        <c:if test="${d.last}">
                            <input type="button" class="previousbutton" value="上一题" onclick="prevSub()"/>
                            <input type="button" class="nextbutton" value="提交" onclick="tijiao()"/>
                        </c:if>
                        <c:if test="${!d.first and !d.last}">
                            <div style="width: 500px">
                            <input type="button"  class="previousbutton" value="上一题" onclick="prevSub()"/>
                                <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                            </div>
                        </c:if>
                    </div>
                <!-- 选项结束 -->

                </span>

            <!-- 题目结束 -->
        </c:forEach>
    </div>
</div>
<!-- 底部 -->
<div id="bottom">
</div>

<script>
    var i=0;// 试题的索引 默认设置为0
    var j=1;// 进度条上的第几题
    var chackOption=[]; // 选中的数据
    var totalsub=Number($("#totalnum").text());//获取试题的总数
    var recordid=localStorage.getItem("recordid");//获取测试人的id

    $(function(){
        changeStyle();// 只显示索引i对应的试题

        //悬浮添加样式
        $(".xx").children("li").hover(function(){
            $(this).css("background-color","green");
        },function(){
            $(this).css("background-color","");
        })
        //当点击选项的时候自动给切换到下一个题目
        $(".xx").children("li").click(function(){
            // 如果是最后一道题就不能点击了
            // 进度条的值加1
            if(j<totalsub){
                j++;
                changeJinduTiao("+");// 更改进度条  进度条+
            }

            // 将对那个的数据存到集合里面
            var checkobj={};
            // 获取当前的兄弟标签input
            var sasnumber=$(this).parent(".xx").prev().text();// 获取试题的编号
            //alert(sasnumber)
            var sasanswer=$(this).text().substr(0, 1);// 获取对应的答案
            //alert(sasanswer)
            checkobj["sasnumber"]=sasnumber;
            checkobj["sasanswer"]=sasanswer;
            checkobj["recordid"]=recordid;
            chackOption[i]=checkobj; // 将对应的试题和自己选择的答案放到chackOption中
            $(".xx").children("li").css("background-color","");
            $(this).css("background-color","orange");
            // 相当于是后台里面的application    sessionlocalStorage
            // setItem("","")
            localStorage.setItem("checkdata",JSON.stringify(chackOption));// 将chackOption中的值存放道localStorage中
            if(i==(totalsub-1)){
                alert("已经是最后一道题了");
                return ;
            }
            i++;// 索引值加一
            changeStyle();// 更改显示的试题
        })
    })

    /*
        改变显示题目的状态
     */
    function changeStyle(){
        localStorage.setItem("checkdata",JSON.stringify(chackOption));
        $(".tm").css("display","none");
        $(".tm")[i].style.display="block";
        changeBgColor();
    }

    /**
     * 更改进度条上面的题号 与 进度条进度 的方法
     */
    function changeJinduTiao(fh){
        if(j<10){
            $("#curr").html("0"+j);
        }else{
            $("#curr").html(j);
        }
        var oldwidth=$("#options div:nth-of-type(2) div").css("width").slice(0,-2);
        var newwidth=0;
        if(fh=='+'){
            newwidth=Number(oldwidth)+30
        }else{
            newwidth=Number(oldwidth)-30
        }
        $("#options div:nth-of-type(2) div").css("width",newwidth+"px");
    }

    /*
    *上一题的按钮
     */
    function prevSub(){
        i--;
        j--;
        changeJinduTiao("-");
        changeStyle();
    }
    /**
     * 下一题的按钮
     */
    function nextSub(){
        i++;
        j++;
        changeJinduTiao("+");
        changeStyle();
    }

    /**
     * 更改背景颜色
     */
    function changeBgColor(){
        //如果之前已经做过这个题目了就展示之前的结果  否则直接就展示下一题
        //集合中的数据拿出来并选中  之前已经选中的那个li
        var allData=JSON.parse(localStorage.getItem("checkdata"));
        var checkData=allData[i];
        if(checkData!='undefined'&&checkData!=null&&checkData!=''){
            var sasanswer=checkData.sasanswer;
            var sasnumber=checkData.sasnumber;
            // 找到答案为answer的选中
            // 找到span的text为sasnumber的然后显示
            var aaa=$($(".tm")[i]).children().find(".xx").children();
            aaa.each(item=>{
                $(aaa[item]).css("background-color","");
                // item是一个数字
                var content=aaa[item].innerText;
                var sasanswer1=content.substr(0, 1);

                //alert(sasanswer1);
                if(sasanswer==sasanswer1){
                    $(aaa[item]).css("background-color","orange");
                }
            })
        }
    }

    /**
     * 提交试题的记录
     */
    function tijiao(){
        // 将数据插入到数据库中
        var data= localStorage.getItem("checkdata");
        // 判断是不是有空的  如果有空的就提示 需要做完题目
        var newData=JSON.parse(data);

        var notcheck=[];
        if(totalsub!=newData.length){
            alert("题没有做完！！！");
            return;
        }else{
            // 如果长度一样  里面有null 也提示题目没有做完
            newData.forEach(function (item,index){
                if(item==null){
                    notcheck.push((index+1)+"");
                    // alert("第"+(index+1)+"题没有做完！！！");
                    // return;
                }
            })
            if(notcheck.length!=0){
                alert("您"+notcheck.toString()+"道题没有做！！！！");
                return;
            }
        }
        //alert(data)
        //   如果传递到后台是一个json字符串
        //  contentType: 'application/json;charset=utf8',
        //
        $.ajax({
            url:"${pageContext.request.contextPath}/tSasRecordDetails/addRecordDetails",
            type:"post",
            data:data,
            contentType: 'application/json;charset=utf8',
            success:function (d){
                if(d.data==true){
                    localStorage.clear();// 清除localstorage中的值
                    window.location="${pageContext.request.contextPath}/sas/saslogin.jsp"
                }
            }
        });
        //alert("提交到数据库！！！")
    }
</script>
</body>
</html>
